import React from 'react'
import { Column } from '@ant-design/plots';
function timestamp(timestamp) {
  let date = new Date(timestamp)
  var Y = date.getFullYear() + '-';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var D = date.getDate();
  return Y + M + D;
}

export default function Data() {

  const data = [
    {
      type: timestamp(new Date()),
      sales: 38,
    },
    {
      type: timestamp((new Date() - 24 * 60 * 60 * 1000)),
      sales: 52,
    },
    {
      type: timestamp((new Date() - 2 * 24 * 60 * 60 * 1000)),
      sales: 61,
    },
    {
      type: timestamp((new Date() - 3 * 24 * 60 * 60 * 1000)),
      sales: 145,
    },
    {
      type: timestamp((new Date() - 4 * 24 * 60 * 60 * 1000)),
      sales: 48,
    },
    {
      type: timestamp((new Date() - 5 * 24 * 60 * 60 * 1000)),
      sales: 38,
    },
    {
      type: timestamp((new Date() - 6 * 24 * 60 * 60 * 1000)),
      sales: 38,
    }
  ];
  const config = {
    data,
    xField: 'type',
    yField: 'sales',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'top', 'bottom', 'middle',
      // 配置样式
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      type: {
        alias: '时间',
      },
      sales: {
        alias: '销售额',
      },
    },
  };
  return (
    <div style={{ minHeight: '88vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ width: '70%', padding: '100px', backgroundColor: '#fff' }}>
        <h1 style={{ marginBottom: '80px', fontSize: '30px', fontWeight: '500' }}>近七天销售额</h1>
        <Column {...config} />
      </div>
    </div>
  )
}
